import {
    PerspectiveCamera,
    Scene,
    Mesh,
    WebGLRenderer,
    SphereGeometry,
    TextureLoader,
    MeshPhongMaterial,
    AmbientLight,
    PointLight,
    Vector2,
    Clock,
    AxesHelper,
} from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass";
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass";
export class LearnShader {
    private scene!: Scene;
    private camera!: PerspectiveCamera;
    private webGLRenderer!: WebGLRenderer;
    private composer!: EffectComposer;

    constructor() {
        this.scene = new Scene();
        this.scene.add(new AxesHelper(10));
        this.camera = new PerspectiveCamera(
            75,
            window.innerWidth / window.innerHeight,
            0.01,
            1000
        );
        this.camera.position.set(100, 100, 200);
        this.camera.lookAt(this.scene.position);
        this.webGLRenderer = new WebGLRenderer({ antialias: true });
        this.webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(this.webGLRenderer.domElement);

        const geometry = new SphereGeometry(40, 40, 40);
        const material = new MeshPhongMaterial({
            // map: new TextureLoader().load("../assets/Earth.png"),
            // normalMap: new TextureLoader().load("../assets/EarthNormal.png"),
            // specularMap: new TextureLoader().load("../assets/EarthSpec.png"),
            // specular: 0xff0000,
            color: 0x5511ff,
            // shininess: 1,
        });
        const mesh = new Mesh(geometry, material);
        this.scene.add(mesh);

        const renderPass = new RenderPass(this.scene, this.camera);
        this.composer = new EffectComposer(this.webGLRenderer);
        /**
         * UnrealBloomPass的参数
         * 1:辉光所覆盖的场景大小
         * 2：辉光的强度
         * 3：辉光散发的半径
         * 4：辉光的阈值（场景中的光强大于该值就会产生辉光效果）
         */
        const unrealBloomPass = new UnrealBloomPass(
            new Vector2(window.innerWidth, window.innerHeight),
            13,
            7,
            0.5
        );
        unrealBloomPass.renderToScreen = true;
        this.composer.addPass(renderPass);
        this.composer.addPass(unrealBloomPass);

        // 环境光
        const ambientlight = new AmbientLight(0xffffff);
        this.scene.add(ambientlight);
        // 点光源
        const pointLight = new PointLight(0xffffff);
        pointLight.position.set(100, 100, 100);
        this.scene.add(pointLight);

        new OrbitControls(this.camera, this.webGLRenderer.domElement);
        window.addEventListener("resize", () => this.onWindowResize());
        this.render();
    }

    private onWindowResize() {
        this.webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        this.camera.aspect = window.innerWidth / window.innerHeight;
        this.camera.updateProjectionMatrix(); //相机属性发生变化更新投影矩阵
    }
    private render() {
        this.webGLRenderer.autoClear = false;
        window.requestAnimationFrame(() => this.render());
        // this.webGLRenderer.render(this.scene, this.camera);
        // this.webGLRenderer.render(this.scene, this.camera);
        this.composer.render();
    }
}
